{% extends 'base.html' %}
{% load static %}

{% block title %}个人中心 - AI故事生成系统{% endblock %}

{% block extra_css %}
<style>
    .profile-avatar {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid #f8f9fa;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .profile-sidebar {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
    }
    .profile-tab-content {
        min-height: 400px;
    }
    .user-info-item {
        margin-bottom: 10px;
    }
    .story-item {
        border-left: 3px solid #007bff;
        padding-left: 15px;
        margin-bottom: 15px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <!-- 左侧边栏：用户头像和基本信息 -->
        <div class="col-md-3">
            <div class="profile-sidebar text-center mb-4">
                {% if user_profile and user_profile.avatar %}
                    <img src="{{ user_profile.avatar.url }}" alt="用户头像" class="profile-avatar mb-3">
                {% else %}
                    <img src="{% static 'admin/img/tx.png' %}" alt="默认头像" class="profile-avatar mb-3">
                {% endif %}
                
                <h4>{{ user.username }}</h4>
                <p class="text-muted">
                    {% if user_profile.is_creator %}
                    <span class="badge bg-primary">创作者</span>
                    {% endif %}
                    <small>加入于 {{ user.date_joined|date:"Y-m-d" }}</small>
                </p>
                
                <div class="d-grid gap-2 mt-3">
                    <a href="#" class="btn btn-outline-primary">编辑资料</a>
                </div>
                
                <hr>
                
                <div class="user-stats text-start">
                    <div class="user-info-item">
                        <i class="fas fa-book me-2"></i> {{ user_stories.count }} 个故事
                    </div>
                    <div class="user-info-item">
                        <i class="fas fa-eye me-2"></i> {{ view_history|length }} 次浏览
                    </div>
                    <div class="user-info-item">
                        <i class="fas fa-heart me-2"></i> {{ likes|length }} 个点赞
                    </div>
                    <div class="user-info-item">
                        <i class="fas fa-star me-2"></i> {{ favorites|length }} 个收藏
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧内容区：选项卡 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="profileTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {% if active_tab == 'profile' %}active{% endif %}" 
                               id="profile-tab" href="?tab=profile">个人资料</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {% if active_tab == 'stories' %}active{% endif %}" 
                               id="stories-tab" href="?tab=stories">我的故事</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {% if active_tab == 'views' %}active{% endif %}" 
                               id="views-tab" href="?tab=views">浏览记录</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {% if active_tab == 'likes' %}active{% endif %}" 
                               id="likes-tab" href="?tab=likes">点赞记录</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {% if active_tab == 'favorites' %}active{% endif %}" 
                               id="favorites-tab" href="?tab=favorites">收藏记录</a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link {% if active_tab == 'reports' %}active{% endif %}" 
                               id="reports-tab" href="?tab=reports">举报记录</a>
                        </li>
                    </ul>
                </div>
                
                <div class="card-body profile-tab-content">
                    <!-- 个人资料 -->
                    {% if active_tab == 'profile' %}
                    <h3 class="mb-4">个人资料</h3>
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% for field in form %}
                        <div class="mb-3">
                            <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
                            {{ field }}
                            {% if field.errors %}
                            <div class="invalid-feedback d-block">
                                {{ field.errors.0 }}
                            </div>
                            {% endif %}
                            {% if field.help_text %}
                            <div class="form-text">{{ field.help_text }}</div>
                            {% endif %}
                        </div>
                        {% endfor %}
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">保存更改</button>
                        </div>
                    </form>
                    
                    <!-- 我的故事 -->
                    {% elif active_tab == 'stories' %}
                    <h3 class="mb-4">我的故事</h3>
                    <div class="d-grid gap-2 mb-4">
                        <a href="{% url 'story:create' %}" class="btn btn-success">
                            <i class="fas fa-plus-circle me-2"></i>创建新故事
                        </a>
                        <a href="{% url 'story:generate' %}" class="btn btn-primary">
                            <i class="fas fa-robot me-2"></i>AI生成故事
                        </a>
                    </div>
                    
                    {% if user_stories %}
                    <div class="list-group">
                        {% for story in user_stories %}
                        <div class="story-item">
                            <h5><a href="{% url 'story:detail' story.pk %}">{{ story.title }}</a></h5>
                            <p class="text-muted small">
                                <span class="badge bg-secondary">{{ story.get_category_display }}</span>
                                <i class="fas fa-calendar-alt ms-2 me-1"></i>{{ story.created_at|date:"Y-m-d" }}
                                <i class="fas fa-eye ms-2 me-1"></i>{{ story.views }}
                                <i class="fas fa-heart ms-2 me-1"></i>{{ story.likes }}
                                {% if story.is_draft %}
                                <span class="badge bg-warning ms-2">草稿</span>
                                {% endif %}
                            </p>
                            <p class="mb-2">{{ story.content|striptags|truncatechars:150 }}</p>
                            <div>
                                <a href="{% url 'story:edit' story.pk %}" class="btn btn-sm btn-outline-primary">编辑</a>
                                <a href="{% url 'story:detail' story.pk %}" class="btn btn-sm btn-outline-secondary">查看</a>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center">您还没有创建任何故事</p>
                    {% endif %}
                    
                    <!-- 浏览记录 -->
                    {% elif active_tab == 'views' %}
                    <h3 class="mb-4">浏览记录</h3>
                    {% if view_history %}
                    <div class="list-group">
                        {% for item in view_history %}
                        <div class="story-item">
                            <h5><a href="{% url 'story:detail' item.story.pk %}">{{ item.story.title }}</a></h5>
                            <p class="text-muted small">
                                <span class="badge bg-secondary">{{ item.story.get_category_display }}</span>
                                <i class="fas fa-user ms-2 me-1"></i>{{ item.story.author.username }}
                                <i class="fas fa-clock ms-2 me-1"></i>浏览于 {{ item.timestamp|date:"Y-m-d H:i" }}
                            </p>
                            <p class="mb-0">{{ item.story.content|striptags|truncatechars:150 }}</p>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center">您还没有浏览记录</p>
                    {% endif %}
                    
                    <!-- 点赞记录 -->
                    {% elif active_tab == 'likes' %}
                    <h3 class="mb-4">点赞记录</h3>
                    {% if likes %}
                    <div class="list-group">
                        {% for like in likes %}
                        <div class="story-item">
                            <h5><a href="{% url 'story:detail' like.story.pk %}">{{ like.story.title }}</a></h5>
                            <p class="text-muted small">
                                <span class="badge bg-secondary">{{ like.story.get_category_display }}</span>
                                <i class="fas fa-user ms-2 me-1"></i>{{ like.story.author.username }}
                                <i class="fas fa-clock ms-2 me-1"></i>点赞于 {{ like.created_at|date:"Y-m-d H:i" }}
                            </p>
                            <p class="mb-0">{{ like.story.content|striptags|truncatechars:150 }}</p>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center">您还没有点赞记录</p>
                    {% endif %}
                    
                    <!-- 收藏记录 -->
                    {% elif active_tab == 'favorites' %}
                    <h3 class="mb-4">收藏记录</h3>
                    {% if favorites %}
                    <div class="list-group">
                        {% for favorite in favorites %}
                        <div class="story-item">
                            <h5><a href="{% url 'story:detail' favorite.story.pk %}">{{ favorite.story.title }}</a></h5>
                            <p class="text-muted small">
                                <span class="badge bg-secondary">{{ favorite.story.get_category_display }}</span>
                                <i class="fas fa-user ms-2 me-1"></i>{{ favorite.story.author.username }}
                                <i class="fas fa-clock ms-2 me-1"></i>收藏于 {{ favorite.created_at|date:"Y-m-d H:i" }}
                            </p>
                            <p class="mb-0">{{ favorite.story.content|striptags|truncatechars:150 }}</p>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center">您还没有收藏记录</p>
                    {% endif %}
                    
                    <!-- 举报记录 -->
                    {% elif active_tab == 'reports' %}
                    <h3 class="mb-4">举报记录</h3>
                    {% if reports %}
                    <div class="list-group">
                        {% for report in reports %}
                        <div class="story-item">
                            <h5><a href="{% url 'story:detail' report.story.pk %}">{{ report.story.title }}</a></h5>
                            <p class="text-muted small">
                                <span class="badge bg-secondary">{{ report.get_report_type_display }}</span>
                                <i class="fas fa-clock ms-2 me-1"></i>举报于 {{ report.created_at|date:"Y-m-d H:i" }}
                                {% if report.is_handled %}
                                <span class="badge bg-success ms-2">已处理</span>
                                {% else %}
                                <span class="badge bg-warning ms-2">处理中</span>
                                {% endif %}
                            </p>
                            <p class="mb-0">举报原因: {{ report.description }}</p>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted text-center">您还没有举报记录</p>
                    {% endif %}
                    
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 